:root {
    /* light的意思朝向背景色的对比度、亮度混色，dark的意思是远离背景色的对比度、亮度混色 */
    --el-color-primary: hsl(184, 91%, 34%);
    --el-color-primary-light-3: hsl(184, 91%, 30%);
    --el-color-primary-light-5: hsl(184, 91%, 28%);
    --el-color-primary-light-7: hsl(184, 91%, 26%);
    --el-color-primary-light-8: hsl(184, 91%, 24%);
    --el-color-primary-light-9: hsl(184, 91%, 20%);
    --el-color-primary-dark-2: hsl(184, 91%, 36%);
    // --el-color-success: hsl(100, 54%, 49%);
    // --el-color-success-light-3: hsl(100, 54%, 46%);
    // --el-color-success-light-5: hsl(100, 54%, 42%);
    // --el-color-success-light-7: hsl(100, 54%, 38%);
    // --el-color-success-light-8: hsl(100, 54%, 34%);
    // --el-color-success-light-9: hsl(100, 54%, 30%);
    // --el-color-success-dark-2: hsl(100, 54%, 53%);
    // --el-color-warning: hsl(36, 77%, 57%);
    // --el-color-warning-light-3: hsl(36, 77%, 54%);
    // --el-color-warning-light-5: hsl(36, 77%, 50%);
    // --el-color-warning-light-7: hsl(36, 77%, 46%);
    // --el-color-warning-light-8: hsl(36, 77%, 42%);
    // --el-color-warning-light-9: hsl(36, 77%, 38%);
    // --el-color-warning-dark-2: hsl(36, 77%, 60%);
    // --el-color-danger: hsl(0, 87%, 69%);
    // --el-color-danger-light-3: hsl(0, 87%, 66%);
    // --el-color-danger-light-5: hsl(0, 87%, 63%);
    // --el-color-danger-light-7: hsl(0, 87%, 60%);
    // --el-color-danger-light-8: hsl(0, 87%, 57%);
    // --el-color-danger-light-9: hsl(0, 87%, 54%);
    // --el-color-danger-dark-2: hsl(0, 87%, 73%);
    // --el-color-error: hsl(0, 87%, 69%);
    // --el-color-error-light-3: hsl(0, 87%, 66%);
    // --el-color-error-light-5: hsl(0, 87%, 63%);
    // --el-color-error-light-7: hsl(0, 87%, 60%);
    // --el-color-error-light-8: hsl(0, 87%, 57%);
    // --el-color-error-light-9: hsl(0, 87%, 54%);
    // --el-color-error-dark-2: hsl(0, 87%, 73%);
    // --el-color-info: hsl(220, 4%, 58%);
    // --el-color-info-light-3: hsl(220, 4%, 55%);
    // --el-color-info-light-5: hsl(220, 4%, 52%);
    // --el-color-info-light-7: hsl(220, 4%, 49%);
    // --el-color-info-light-8: hsl(220, 4%, 46%);
    // --el-color-info-light-9: hsl(220, 4%, 43%);
    // --el-color-info-dark-2: hsl(220, 4%, 62%);
    // --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
    // --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
    // --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
    // --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
    --el-bg-color-page: hsl(184, 53%, 24%);
    --el-bg-color: hsl(184, 53%, 28%);
    --el-bg-color-overlay: hsl(184, 53%, 32%);
    --el-text-color-primary: hsl(219, 37%, 93%);
    --el-text-color-regular: hsl(222, 16%, 84%);
    --el-text-color-secondary: hsl(222, 12%, 66%);
    --el-text-color-placeholder: hsl(222, 12%, 60%);
    --el-text-color-disabled: hsl(222, 12%, 55%);
    --el-border-color-darker: hsl(184, 43%, 38%);
    --el-border-color-dark: hsl(184, 43%, 35%);
    --el-border-color: hsl(184, 43%, 32%);
    --el-border-color-light: hsl(184, 43%, 30%);
    --el-border-color-lighter: hsl(184, 43%, 28%);
    --el-border-color-extra-light: hsl(184, 43%, 26%);
    --el-fill-color-darker: hsl(184, 43%, 38%);
    --el-fill-color-dark: hsl(184, 43%, 35%);
    --el-fill-color: hsl(184, 43%, 32%);
    --el-fill-color-light: hsl(184, 43%, 25%);
    --el-fill-color-lighter: hsl(184, 43%, 20%);
    --el-fill-color-blank: hsl(184, 43%, 15%);
    --el-fill-color-extra-light: hsl(184, 43%, 20%);
    --el-mask-color: rgba(0, 0, 0, 0.5);
    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}

:root .el-button {
    --el-button-disabled-text-color: rgba(255, 255, 255, 0.5)
}

:root .el-card {
    --el-card-bg-color: var(--el-bg-color-overlay)
}

:root .el-empty {
    --el-empty-fill-color-0: var(--el-color-black);
    --el-empty-fill-color-1: hsl(240, 4%, 31%);
    --el-empty-fill-color-2: hsl(223, 6%, 23%);
    --el-empty-fill-color-3: hsl(240, 3%, 12%);
    --el-empty-fill-color-4: hsl(240, 4%, 15%);
    --el-empty-fill-color-5: hsl(225, 6%, 13%);
    --el-empty-fill-color-6: hsl(220, 4%, 14%);
    --el-empty-fill-color-7: hsl(225, 7%, 11%);
    --el-empty-fill-color-8: hsl(220, 5%, 12%);
    --el-empty-fill-color-9: hsl(240, 4%, 10%);
}






/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
.pure-scrollbar {
    /* Firefox */
    scrollbar-width: thin;
    /* 可选值为 'auto', 'thin', 'none' */
    scrollbar-color: rgb(221 222 224) transparent;

    /* 滑块颜色、轨道颜色 */
    ::-webkit-scrollbar {
        width: 6px;
        /* 滚动条宽度 */
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background: transparent;
        /* 轨道颜色 */
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: rgb(221 222 224);
        border-radius: 4px;
    }

    /* 滚动条滑块：hover状态 */
    ::-webkit-scrollbar-thumb:hover {
        background: rgb(199 201 203);
        /* 滑块hover颜色 */
    }
}

/* tag标签 */
.pure-tag.el-tag--dark,
.pure-tag.el-tag--dark.el-tag--primary {
    --el-tag-border-color: transparent;
}

/* 表格样式 */
.pure-table {
    .el-table__body tr.current-row>td.el-table__cell {
        background-color: rgba(225, 220, 40, 0.15)
    }
}